<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width"/>

    <title>预览</title>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            -ms-content-zooming: none;
        }

        #frameholder {
            width: 50%;
            height: calc(100vh - 145px);
            margin:auto;
        }

        #office_frame {
            width: 100%;
            height: 100%;

        }
    </style>
</head>

<body>

<form id="office_form" name="office_form" target="office_frame"
      action=""
      method="post">
    <input name="access_token" value="<%= token %>" type="hidden"/>
    <input name="access_token_ttl" value="<%= tokenTtl %>" type="hidden"/>
</form>

<div id="frameholder"></div>
<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    function getQueryString(name) {
        const query = window.location.search.substr(1);
        const params = query.split('&');
        for (let i = 0; i < params.length; i++) {
            const param = params[i].split('=');
            if (param[0] === name) {
                return decodeURIComponent(param[1]);
            }
        }
        return null;
    }
    function getSuffix(tmpurl){
        let index= tmpurl.lastIndexOf("?")
        let path=tmpurl
        if(index>0){
            path=tmpurl.substring(0,index)
        }
        index=path.lastIndexOf(".")

        if(index>0){
            return path.substring(index+1)
        }
        return null
    }
</script>
<script type="text/javascript">
    function loadIframe(id,myurl,officeURL){

        suffix=getSuffix(myurl)
        var uri=window.location.protocol+"//"+window.location.hostname
            if(location.port){
              uri+=  ":"+location.port+"/wopi/files/"+id;
            }else{
                uri+= "/wopi/files/"+id;
            }


        uri=encodeURIComponent(uri)
        let viewmodel=''
        let viewparammodel=getQueryString('viewmodel')
        if(viewparammodel){
            if(viewparammodel=='embed'){
                viewmodel='embed=1&'
            }else if(viewparammodel=='mobile'){
                viewmodel='mobile=1&'
            }
        }


        let hostUrl=officeURL
        var officeserverurl
        if("ppt" == suffix || "pptx"== suffix){
        let commparam='PowerPointView=ChromelessView&Embed=1'
            officeserverurl=hostUrl+'/p/PowerPointFrame.aspx?'+commparam+'&WOPISrc='+uri
        }else if("doc"==suffix || "docx" == suffix){

          let commparam='embed=1'
            officeserverurl=hostUrl+'/wv/wordviewerframe.aspx?'+commparam+'&WOPISrc='+uri
        }else{
            alert("暂不支持格式")
        }
      //document.write("officeserverurl="+officeserverurl)
     //  window.open(officeserverurl);

      //  document.getElementById('office_form').action = ;
        var frameholder = document.getElementById('frameholder');
        var office_frame = document.createElement('iframe');
        office_frame.name = 'office_frame';
        office_frame.id = 'office_frame';
        office_frame.src=officeserverurl;
        office_frame.title = 'Office Frame';
        office_frame.setAttribute('allowfullscreen', 'true');

        frameholder.appendChild(office_frame);

      // document.getElementById('office_form').submit();
    }
    $(document).ready(function(){

        var myurl=getQueryString('myurl')
        console.log("myurl="+myurl)
        if(!myurl){
            alert('请输入myurl')
        }
        $.get("/wopi/getfileid?url="+encodeURIComponent(myurl),function(data,status){
            loadIframe(data.fileId,myurl,data.officeURL)

            document.title=data.fileName
        });
    });

</script>
</body>
</html>